<template>
	<div class="app-container material-category-container">
		<div class="left-box">
			<div class="left-box-title">
				<span class="el-icon-menu title-icon"></span>
				<span>分类</span>
			</div>
			<div class="left-box-content">
				<el-tree
					:data="treeData"
					highlight-current
					:props="{
						children: 'children',
						value: 'id',
						label: 'nameAndCode'
					}"
					:load="loadNode"
					lazy
					@node-click="handleNodeClick"
				></el-tree>
			</div>
		</div>
		<div class="right-box">
			<div class="right-box-title">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="margin-5-0 item-gap" @click="onAddBtn"></jk-add-button>
					<!--<jk-report-button :permission-prefix="prefix" class="margin-5-0" :loading="exportLoading" @click="onReportBtn"></jk-report-button>-->
					<jk-button size="small" @click="importDialogState = true">导入</jk-button>
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.auditState" :option-list="auditStateList" placeholder="状态" clearable size="small" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-select v-model="searchParams.workshopId" :option-list="workshopList" placeholder="区域" size="small" class="search-bar-item-size2 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.nameOrCode" placeholder="编码或名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
			<div class="right-box-content">
				<jk-table :loading="tableLoading" :data="tableData" :height="tableHeight">
					<vxe-column title="编码" align="left" field="code" :min-width="120" />
					<vxe-column title="名称" align="left" field="name" :min-width="280" />
					<vxe-column title="规格型号" align="left" field="models" :min-width="200" />
					<vxe-column title="基准计量单位" align="left" field="unitName" :width="100" />
					<vxe-column title="存货类型" align="left" field="typeName" :width="100" />
					<vxe-column title="纺纱方式" align="left" field="spinTypeName" :width="100" />
					<vxe-column title="物料分类" align="left" field="categoryName" :width="100" />
					<vxe-column title="创建人" align="left" field="creatorName" :width="90"></vxe-column>
					<vxe-column title="创建时间" align="left" field="createTime" :width="160"></vxe-column>
					<vxe-column title="修改人" align="left" field="updaterName" :width="90"></vxe-column>
					<vxe-column title="修改时间" align="left" field="updateTime" :width="160"></vxe-column>
					<vxe-column title="状态" align="center" field="auditState" :width="100">
						<template slot-scope="scope">
							<jk-common-status :status="scope.row.auditState"></jk-common-status>
						</template>
					</vxe-column>
					<vxe-column title="操作" align="center" fixed="right" :width="250">
						<template slot-scope="scope">
							<jk-operation-bar
								:scope="scope"
								api-prefix="spin/product"
								:permission-prefix="prefix"
								@on-detail="onDetailBtn"
								@on-edit="onEditBtn"
								@on-refresh="getListRequest"
							></jk-operation-bar>
						</template>
					</vxe-column>
				</jk-table>

				<!-- 分页组件 -->
				<footer ref="box2" class="flex-end-center margin-top-10">
					<jk-page
						:page-index="searchParams.pageNo"
						:page-sizes="searchParams.pageSizes"
						:page-size="searchParams.pageSize"
						:total="totalCount"
						@on-change="onPageChange"
					/>
				</footer>
			</div>
			<detail-dialog
				:data-id="dataId"
				:dialog-state="detailDialogState"
				@on-visible-change="onVisibleChangeOfDetailDialog"
			></detail-dialog>
			<save-dialog
				:permission-prefix="prefix"
				:data-id="dataId"
				:select-tree-item="selectTreeItem"
				:dialog-state="saveDialogState"
				@on-visible-change="onVisibleChange"
				@on-finish="onFinish"
			></save-dialog>
			<import-dialog
				:dialog-state="importDialogState"
				@on-visible-change="onVisibleChangeOfImportDialog"
				@on-finish="onFinishBtnOfImportDialog"
			></import-dialog>
		</div>
	</div>
</template>

<script>
    import saveDialog from './save-dialog';
    import detailDialog from './detail-dialog';
    import calHeight from '/src/mixins/cal-table-height';
    import { createTree, pageConfig } from '/src/utils/jk/jk-tool';
    import {
        spinProductPage,
        spinProductExportExcel
    } from '/src/api/material/material';
    import { auditStateList } from '../../../utils/jk/status-option-list';
    import { spinProductCategoryList } from '../../../api/material/category';
    import importDialog from './import-dialog';
    import handlerCache from '../../../mixins/handler-cache';

    export default {
        name: 'Material',
        components: {
            importDialog,
            saveDialog,
            detailDialog
        },
        mixins: [calHeight, handlerCache],
        data() {
            return {
                apiItem: {
                    'page': spinProductPage,
                    'exportExcel': spinProductExportExcel
                },
                importDialogState: false,
                selectTreeItem: {},
                treeData: [],
                detailDialogState: false,
                prefix: 'spin:product',
                auditStateList: auditStateList,
                dataId: null,
                workshopList: [],
                saveDialogState: false,
                tableLoading: true,
                exportLoading: false,
                totalCount: 0,
                tableData: [],
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    nameOrCode: '',
                    auditState: null,
                    workshopId: null,
                    categoryId: null
                }
            };
        },
        mounted() {
            this.getDependentData();
        },
        methods: {
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([{ name: 'region' }]);
                }
                const params = {};
                params.parentId = node.data.id;
                return spinProductCategoryList(params).then(res => {
                    if (res.data.status === 200) {
                        const list = res.data.res ? res.data.res.map(x => {
                            x.nameAndCode = `${x.code} ${x.name}`;
                            x.leaf = false;
                            return x;
                        }) : [];
                        resolve(list);
                    }
                });
            },
            getTreeListRequest() {
                return spinProductCategoryList({
                    parentId: 0
                }).then(res => {
                    if (res.data.status === 200) {
                        const list = res.data.res ? res.data.res.map(x => {
                            x.nameAndCode = `${x.code} ${x.name}`;
                            return x;
                        }) : [];
                        this.treeData = createTree(list, {});
                    }
                });
            },
            onVisibleChangeOfImportDialog(e) {
                this.importDialogState = e;
            },
            onFinishBtnOfImportDialog() {
                this.importDialogState = false;
                this.getListRequest();
            },
            onSearchBtn() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            handleNodeClick(e) {
                this.deptId = e.id;
                if (e.children && e.children.length !== 0) {
                    this.selectTreeItem = null;
                    this.selectTreeItem = {
                        id: null,
                        code: '',
                        name: '',
                        typeId: null,
                        typeCode: '',
                        typeName: ''
                    };
                } else {
                    this.selectTreeItem = {
                        id: e.id,
                        code: e.code,
                        name: e.name,
                        typeId: e.typeId,
                        typeCode: e.typeCode,
                        typeName: e.typeName
                    };
                }
                this.searchParams.pageNo = 1;
                // this.searchParams.categoryId = this.selectTreeItem.id;
                this.searchParams.categoryId = e.id;
                this.getListRequest();
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                if (!this.searchParams.workshopId) this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                await this.getTreeListRequest();
                await this.getListRequest();
                this.tableLoading = false;
            },
            onDetailBtn(e) {
                this.dataId = e.id;
                this.detailDialogState = true;
            },
            onVisibleChangeOfDetailDialog(e) {
                this.detailDialogState = e;
                if (!e) {
                    this.dataId = null;
                }
            },
            onFinish() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
                if (!e) {
                    this.dataId = null;
                }
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                return this.apiItem['page'](this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.totalCount = res.data.count;
                    }
                });
            },
            /** 新增按钮操作 */
            onAddBtn() {
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },
            /** 导出按钮操作 */
            onReportBtn() {
                const params = { ...this.searchParams };
                params.pageNo = null;
                params.pageSize = null;
                this.$confirm('是否确认导出所有班组数据项?', { type: 'warning' }).then(() => {
                    this.exportLoading = true;
                    return this.apiItem['exportExcel'](params);
                }).then(res => {
                    if (res.data.status === 200) {
                        this.$download.excel(res, `${this.$route.meta.name}.xls`);
                        this.exportLoading = false;
                    }
                }).catch(() => {});
            }
        }
    };
</script>
<style scoped lang="scss">
    $left_menu_width: 260px;
    $title_height: 42px;
    .material-category-container {
        width: 100%;
        height: 100%;
        display: flex;
        .left-box {
            width: $left_menu_width;
            height: 100%;
            float: left;
            background: #fff;
            flex-shrink: 0;
            border: solid 1px #eee;
            .left-box-title {
                width: 100%;
                height: $title_height;
                padding: 0 16px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                font-size: 18px;
                border-bottom: solid 1px #eee;
                .title-icon {
                    font-size: 22px;
                    margin-right: 2px;
                }
            }
            .left-box-content {
                width: 100%;
                height: calc(100% - #{$title_height});
                overflow: auto;
                padding: 10px;
                box-sizing: border-box;
            }
        }
        .right-box {
            width: calc(100% - #{$left_menu_width});
            height: 100%;
            overflow: hidden;
            flex-shrink: 0;
            background: #fff;
            border: solid 1px #eee;
            border-left: none;
            .right-box-title {
                width: 100%;
                height: $title_height;
                padding: 0 12px;
                box-sizing: border-box;
                font-size: 18px;
                border-bottom: solid 1px #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .right-box-content {
                width: 100%;
                height: calc(100% - #{$title_height});
                overflow: hidden;
                padding: 10px;
                box-sizing: border-box;
            }
        }
    }

</style>
